<!-- 司机认证 -->
<template>
  <view class="content">
    <u-form
      :model="form"
      ref="uForm"
      :label-width="240">
      <u-form-item
        label="姓名"
        prop="driverName"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input
          v-model="form.driverName"
          :maxlength="10"
          placeholder="请输入车主姓名" />
      </u-form-item>
      <u-form-item
        label="身份证号"
        prop="driverName1"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input
          v-model="form.driverName1"
          :maxlength="18"
          placeholder="请输入身份证号" />
      </u-form-item>
      <u-form-item
        label="家庭住址"
        prop="driverName2"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input
          v-model="form.driverName2"
          :maxlength="10"
          placeholder="请输入家庭住址" />
      </u-form-item>
      <u-form-item
        label="手机号码"
        prop="driverName3"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <div class="row-box">
          <u-input
            v-model="form.driverName3"
            :maxlength="11"
            placeholder="请输入手机号码" />
          <u-button
            size="mini"
            @click="getCode"
            :disabled="getCodeDisabled"
            >{{ tips }}</u-button
          >
        </div>
      </u-form-item>
      <u-form-item
        label="验证码"
        prop="driverName4"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input
          v-model="form.driverName4"
          :maxlength="10"
          placeholder="请输入验证码">
        </u-input>
      </u-form-item>
      <u-form-item
        label="身份证正页"
        prop="driverLicense"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-upload
          ref="uUpload"
          action="https://www.sxjbjt.com:9507/qdbt/freight-unattended-sunshine/minio/upload"
          :file-list="driverLicenseUploadList"
          @on-success="driverLicensesuccess"
          @on-error="testerror"
          max-count="1"
          :form-data="{
            url: 'driverManagement'
          }"></u-upload>
      </u-form-item>
      <u-form-item
        label="驾驶证正页"
        prop="driverLicense"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-upload
          ref="uUpload"
          action="https://www.sxjbjt.com:9507/qdbt/freight-unattended-sunshine/minio/upload"
          :file-list="driverLicenseUploadList2"
          @on-success="driverLicensesuccess2"
          @on-error="testerror"
          max-count="1"
          :form-data="{
            url: 'driverManagement'
          }"></u-upload>
      </u-form-item>
    </u-form>
    <u-button
      type="primary"
      @click="submit"
      class="vehiclemanagement-index-btn"
      >提交</u-button
    >
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      tips: '获取验证码',
      getCodeDisabled: false,
      form: {
        driverName: '',
        driverName1: '',
        driverName2: '',
        driverName3: '',
        driverName4: ''
      },
      driverLicenseUploadList: [],
      driverLicenseUploadList2: [],
      rules: {
        driverName: [
          {
            required: true,
            message: '请输入姓名',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur'
          }
        ],
        driverName1: [
          {
            required: true,
            message: '请输入身份证号',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur'
          }
        ],
        driverName2: [
          {
            required: true,
            message: '请输入家庭住址',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur'
          }
        ],
        driverName3: [
          {
            required: true,
            message: '请输入手机号码',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur'
          }
        ],
        driverName4: [
          {
            required: true,
            message: '请输入验证码',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur'
          }
        ]
      },
      maxSize: 10485760
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    //正页上传
    driverLicensesuccess(data, index, lists, name) {
      this.form.driverLicense = data.result
      this.showToast('上传成功', 'success')
    },
    //副页上传
    idCardReversesuccess(data, index, lists, name) {
      this.form.idcardBackPhoto = data.result
      this.showToast('上传成功', 'success')
    },
    //上传失败
    testerror(res, index, lists, name) {
      this.showToast('上传失败', 'warning')
    },
    // 提示
    showToast(title, type) {
      this.$refs.uToast.show({
        title,
        type: type || 'error'
      })
    },
    //获取验证码
    getCode() {
      if (this.form.driverName3) {
        this.getCodeDisabled = true
        setTimeout(() => {
          this.getCodeDisabled = false
        }, 2000)
      } else {
        this.showToast('请先输入手机号码', 'warning')
      }
    },
    //提交
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          console.log('验证通过')
        } else {
          console.log('验证失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 16rpx;
  width: 100%;
  .form-item-box {
    .row-box {
      display: flex;
    }
  }
}
</style>
